{include file="header.html"}
<script src="/js/ckeditor/ckeditor.js"></script>
<style>
.goods-list{ width:400px; height:auto; overflow:hidden; margin:0; list-style:none; }
.goods-list li{ position:relative; z-index:2; width:100%; height:60px; margin:0; list-style:none; margin-bottom:10px; background:#f3f3f3; }
.goods-list li a{ display:block; height:100%; margin-left:70px; padding-right:5px; text-align:left; text-decoration:none; }
.goods-list li a div{ float:left; margin-left:-70px; width:60px; height:60px; background:no-repeat center center; background-size:cover; }
.goods-list li a span{ display:block; font-size:12px; color:#666; padding-top:10px; height:30px; line-height:14px; }
.goods-list li a font{ display:block; font-size:12px; color:red; margin-top:10px; }
.goods-list .delBtn{ position:absolute; z-index:1; top:0; right:0; min-width:80px; height:44px; overflow:hidden; color:#fff; text-align:center; font-size:14px; background:red; cursor:pointer; }
.goods-list .delBtn i{ display:block; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-10px; width:21px; height:21px; background:url(../images/mobile/global/delete@2x.png) no-repeat center center; background-size:cover; }

.goods{ width:420px; height:500px; overflow:hidden; background:#fff; border-radius:7px; box-shadow:0 0 10px rgba(0,0,0,0.4); }
.goods .keywords{ border:none; background:#fff; font-size:14px; margin-left:10px; box-sizing:border-box; width:400px; height:40px; outline:none; }
.goods .goods-list{ margin:0 auto; max-height:460px; overflow-y:auto;}
</style>

<div class="page-header">
	<h6>
		文章管理
		<small>
			<i class="ace-icon fa fa-angle-double-right"></i>
			文章编辑
		</small>
	</h6>
</div><!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
	<form class="form-horizontal" role="form" method="post" action="?app=article&act=edit" enctype="multipart/form-data">
		<input type="hidden" name="id" id="id" value="{$row->id}" />
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="title"> 标题 </label>
			<div class="col-sm-10">
				<input type="text" id="title" name="title" value="{$row->title}" class="col-xs-6" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="pic" style="margin-right:10px;"> 图片 </label>
			<div id="imgs" style="float:left;position:relative; " >
                {if $pics}
                    {foreach from=$pics item=pic}
                        <div id="{$pic->id}" style='float:left;position:relative;margin-right:10px;'>
                            <input type="hidden" name="pics[]" value="{$pic->pic}">
                            <img src='{$pic->pic}' width='158' style='margin-top:10px;'><br/>
                            <input type='text' name='sort_pic[]' placeholder="排序" value='{$pic->sort}' /><br/>
                            <a href='###' style='position:absolute;right:-5.5px;top:1.5px;' onclick="onDel({$pic->id});"><img src='/images/horum_img_delete.png' width='20' height='20'></a>
                        </div>
                    {/foreach}
                {/if}
            </div>
            <div id="file">
                <input id="pic_file"  type="file" name="pic_file"  value="" onchange="UploadFile()" style="padding-top:5px;"/>
            </div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="memo"> 文章摘要 </label>
			<div class="col-sm-10">
				<input type="text" id="memo" name="memo" value="{$row->memo}" class="col-xs-6" />
		</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="content"> 内容 </label>
			<div class="col-sm-10">
				<textarea class="ckeditor" name="content" id="content" style="width:95%" rows="50">{$row->content}</textarea>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="type_id"> 分类 </label>
			<div class="col-sm-10">
                <select name="type_id" id="type_id" class="form-control" style="width:150px;">
                    <option value="">请选所属分类</option>
                        <option value="1"{if $row->type_id == 1}selected{/if}> 帮助 </option>
                        <option value="3"{if $row->type_id > 2}selected{/if}> 发现 </option>
                </select>
			</div>
		</div>
		
		<div class="form-group" >
			<label class="col-sm-2 control-label no-padding-right"><span class="btn-info" style="display:inline-block; width:20px;text-align:center;" id="add">+</span> 关联商品<br /><span style="color:#ccc;font-size:12px;">向左侧滑删除</span></label>
			<div class="col-sm-10">
				<ul id="simple-table" class="goods-list">
					{foreach from=$goods item=g}
					<li>
						<a href="index.php?app=goods&act=edit&goods_id={$g->id}" target="_blank">
							<div style="background-image:url({$g->default_pic});"></div>
							<span>{$g->name}</span>
							<font>￥{$g->price}</font>
						</a>
						<input type="hidden" name="goods[]" value="{$g->id}" />
					</li>
					{/foreach}
				</ul>
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="status"> 是否显示 </label>
			<div class="col-sm-10">
				<div class="radio">
					<label>
						<input type="radio" name="status" value="1" class="ace"{if $row->status==1}checked{/if}  />
						<span class="lbl"> 是</span>
					</label>
				</div>
				<div class="radio">
					<label>
						<input type="radio" name="status" value="0" {if $row->status==0}checked{/if} class="ace" />
						<span class="lbl"> 否</span>
					</label>
				</div>
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="sort"> 文章排序 </label>
			<div class="col-sm-10">
				<input type="text" name="sort" id="sort" value="{$row->sort}" class="col-xs-2" /> 数字越小，排在越前
			</div>
		</div>

		<div class="clearfix form-actions">
			<div class="col-md-offset-3 col-md-9">
				<button class="btn btn-info" type="submit">
					<i class="ace-icon fa fa-check bigger-110"></i>
					提交
				</button>

				&nbsp; &nbsp; &nbsp;
				<button class="btn" type="reset">
					<i class="ace-icon fa fa-undo bigger-110"></i>
					重置
				</button>
			</div>
		</div>
	</form>
</div>
</div>
<script>
var xhr, now = 0, i = 0;
function createXMLHttpRequest(){
	if(window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}
}
function UploadFile(){
	if($('#imgs').children().length>=3){
		alert("图片不可超过3张");
	}else{
		var fileObj = document.getElementById("pic_file").files[0];
		var FileController = '?app=article&act=upload_pic';
		var form = new FormData();
		form.append("pic_file", fileObj);
		createXMLHttpRequest();
		xhr.onreadystatechange = handleStateChange;
		xhr.open("post", FileController, true);
		xhr.send(form);
	}
}
function handleStateChange(){
	if(xhr.readyState == 4){
		if(xhr.status == 200 || xhr.status == 0){
			var result = xhr.responseText;
			document.getElementById("imgs").innerHTML+="<div id='"+now+"' style='float:left;position:relative;margin-right:10px;'>"
					+"<img src='"+result+"' width='158' style='margin-top:10px;'>"+
					"<input type='hidden' name='pics[]' value='"+result+"' /><br>"+
					"<input type='text' name='sort_pic[]' placeholder='排序' value='999' /><br>"+
					"<a href='###' style='position:absolute;right:-5.5px;top:1.5px;' onclick='onDel("+now+");'><img src='/images/horum_img_delete.png' width='20' height='20'></a></div>";
			if($('#imgs').children().length>=4){
				$('#file').hide();
			}
		}
	}
}
function onDel(id){
	if(confirm("是否删除？")){
		var picdiv = document.getElementById(id);
		picdiv.parentNode.removeChild(picdiv);
		if($('#imgs').children().length<4){
			$('#file').show();
		}
	}else{
		return false;
	}
}
//关联商品
function bindDelete(){
	$('#simple-table').dragshow({
		title : '<i></i>',
		cls : 'delBtn',
		click : function(row){
			row.slideUp(200, function(){ row.remove() });
			$(this).delay(90).slideUp(200);
		}
	});
}
$(function(){
	$('#flash').change(function(){
		i++;
		if(i%2){
			$('#img').css('display', '');
		}else{
			$('#img').css('display', 'none');
		}
	});
	bindDelete();
    $("#add").click(function(){
		var html = '<div class="goods">\
			<input type="text" class="keywords" placeholder="在这输入商品关键字后回车进行搜索" />\
			<ul class="goods-list"></ul>\
		</div>';
        $.overlay(html, 0, null, function(){
			$('.goods .goods-list').pageScroll(false);
		});
		$('.goods .goods-list').pageScroll(true);
		$('.goods .keywords').onkey({
			callback : function(code){
				if(code==13){
					if(!this.val().length){ $.overloadError('请输入关键字');return }
					$.getJSON('/api.php?app=goods&act=index&keyword='+this.val(), function(json){
						if(json.error!=0){ $.overloadError('请输入关键字');return }
						if(!$.isArray(json.data.goods)){ $.overloadError('搜索不到相关商品');return }
						var html = '';
						for(var i=0; i<json.data.goods.length; i++){
							html += '<li>\
								<a href="javascript:void(0)">\
									<div style="background-image:url('+json.data.goods[i].default_pic+');"></div>\
									<span>'+json.data.goods[i].name+'</span>\
									<font>￥'+json.data.goods[i].price+'</font>\
								</a>\
							</li>';
						}
						$('.goods .goods-list').html(html);
						$('.goods .goods-list a').each(function(i){
							$(this).data('data', json.data.goods[i]).click(function(){
								$.overlay(false);
								var data = $(this).data('data');
								var html = '<li>\
									<a href="index.php?app=goods&act=edit&goods_id='+data.id+'" target="_blank">\
										<div style="background-image:url('+data.default_pic+');"></div>\
										<span>'+data.name+'</span>\
										<font>￥'+data.price+'</font>\
									</a>\
									<input type="hidden" name="goods[]" value="'+data.id+'" />\
								</li>';
								$('#simple-table').append(html);
								bindDelete();
							});
						});
					});
				}
			}
		});
    });
});
</script>
{include file="footer.html"}